<template>
	<view>
		<view class="cu-bar bg-white flex justify-between align-center">
			<view class="padding-lr" :class="animation?'animation-slide-right' :''" @click="startClick()">
				{{start}}
			</view>
			<image src="../static/img/exchange.png" style="width: 28px" mode="widthFix" @tap="toggle()"></image>

			<view class="padding-lr" :class="animation?'animation-slide-left' :''" @click="endClick()">
				{{end}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "StartEndPoint",
		props: {
			start: String,
			end: String
		},
		data() {
			return {
				animation: false
			}
		},
		methods: {
			toggle() {
				this.animation = true;
				setTimeout(() => {
					this.animation = false;
				}, 1000)
				this.$emit('startToggle');
			},
			startClick() {
				this.$emit('startClick');
			},
			endClick() {
				this.$emit('endClick');
			}
		}
	}
</script>

<style>

</style>
